<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
      .nav{
          width: 800px;
          height: 80px;
          background-color: gray;
          margin: 0 auto;
          display: flex;
      }
    .nav .nav-first{
        width: 200px;
        height: 80px;
        background-color: gray;
    }
    .nav .nav-second{
        width: 200px;
        height: 80px;
        background-color: gray;
    }
    .nav .nav-three{
        width: 200px;
        height: 80px;
        background-color: gray;
    }
    .nav .nav-fourth{
        width: 200px;
        height: 80px;
        background-color: gray;
    }
    p{
        text-align: center;
        line-height: 40px;
        font-size: 20px;
    }
    p>a{
        text-decoration:none;
        color: #c1c1bd;
    }
    .jj{
        width: 120px;
        height: 200px;
        border: 1px solid #333;
        margin-left: 30px;
        border-top: none;
        display: none;
    }
    .cp{
        width: 130px;
        height: 200px;
        border: 1px solid #333;
        margin-left: 30px;
        border-top: none;
        display: none;
    }
    .lx{
        width: 130px;
        height: 200px;
        border: 1px solid #333;
        margin-left: 30px;
        border-top: none;
        display: none;
    }
    .rc{
        width: 130px;
        height: 200px;
        border: 1px solid #333;
        margin-left: 30px;
        border-top: none;
        display: none;
    }
    ul>li{
        list-style: none;
        font-size: 17px;
        line-height: 70px;
        
    }
    ul>li>a{
        margin: 0;
        padding: 0;
        margin-left: -10px;
        color: #c1c1bd;
        /* text-align: center; */
        text-decoration: none;
    }
    </style>
</head>
<body>
  <div class="nav">
      <div class="nav-first">
          <p ><a href="" class="one">公司简介</a></p>
          <div class="jj">
              <ul class="jj-first">
                  <li ><a href="#" class="jj-one">概况介绍</a></li>
                  <li ><a href="#" class="jj-two">发展历史</a></li>
                  <li ><a href="#" class="jj-three">公司实力</a></li>
              </ul>
          </div>
      </div>
      <div class="nav-second">
          <p ><a href="" class="two">产品介绍</a></p>
          <div class="cp">
               <ul class="cp-first">
                  <li ><a href="#" class="cp-one">软件研发</a></li>
                  <li ><a href="#" class="cp-two">软件教育</a></li>
                  <li ><a href="#" class="cp-three">天使投资</a></li>
              </ul>
          </div>
      </div>
      <div class="nav-three">
          <p ><a href="" class="three">联系我们</a></p>
          <div class="lx">
               <ul class="lx-first">
                  <li ><a href="#" class="lx-one">公司地址</a></li>
                  <li ><a href="#" class="lx-two">联系方式</a></li>
                  <li ><a href="#" class="lx-three">投资加盟</a></li>
              </ul>
          </div>
      </div>
      <div class="nav-fourth">
          <p ><a href="" class="four">人才招聘</a></p>
          <div class="rc">
               <ul class="rc-first">
                  <li ><a href="#" class="rc-one">Java招聘</a></li>
                  <li ><a href="#" class="rc-two">HTML5招聘</a></li>
                  <li ><a href="#" class="rc-three">PHP招聘</a></li>
              </ul>
          </div>
      </div>
  </div>
</body>
<script src="jquery.js"></script>
</html>
<script>
  var div1 = $('.nav-first');
  var div2 = $('.nav-second');
  var div3 = $('.nav-three');
  var div4 = $('.nav-fourth');
  var p1 = $('.one');
  var p2 = $('.two');
  var p3 = $('.three');
  var p4 = $('.four');
  var jj1 = $('.jj');
  var cp1 = $('.cp');
  var lx1 = $('.lx');
  var rc1 = $('.rc');
  var li1 = $('.jj-one');
  var li2 = $('.jj-two');
  var li3 = $('.jj-three');
  var li4 = $('.cp-one');
  var li5 = $('.cp-two');
  var li6 = $('.cp-three');
  var li7 = $('.lx-one');
  var li8 = $('.lx-two');
  var li9 = $('.lx-three');
  var li10 = $('.rc-one');
  var li11 = $('.rc-two');
  var li12 = $('.rc-three');
  p1.hover(function(){
      p1.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      p1.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   p2.hover(function(){
      p2.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      p2.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   p3.hover(function(){
      p3.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      p3.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   p4.hover(function(){
      p4.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      p4.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
  div1.hover(function(){
      jj1.css('display','block');
  },function(){
      jj1.css('display','none');
  });
  div2.hover(function(){
      cp1.css('display','block');
  },function(){
      cp1.css('display','none');
  });
  div3.hover(function(){
      lx1.css('display','block');
  },function(){
      lx1.css('display','none');
  });
  div4.hover(function(){
      rc1.css('display','block');
  },function(){
      rc1.css('display','none');
  });
  li1.hover(function(){
      li1.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li1.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li2.hover(function(){
      li2.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li2.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li3.hover(function(){
      li3.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li3.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li4.hover(function(){
      li4.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li4.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li5.hover(function(){
      li5.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li5.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li6.hover(function(){
      li6.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li6.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li7.hover(function(){
      li7.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li7.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li8.hover(function(){
      li8.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li8.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li9.hover(function(){
      li9.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li9.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li10.hover(function(){
      li10.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li10.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li11.hover(function(){
      li11.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li11.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
   li12.hover(function(){
      li12.css('color','orange')
      .css('text-decoration','underline');
  },function(){
      li12.css('color','#c1c1bd')
      .css('text-decoration','none');
  });
</script>
